// 平团列表
import React, { useState, useEffect } from 'react'
import DocumentTitle from 'react-document-title'
import { PingTuanListStyle, } from './style'
import { PingTuan } from './compnent'
import { getGroupList, getGroupAdressList, orderByGroup } from '@api/pingtuan'
import { useParams } from 'react-router-dom'
import { Toast } from 'antd-mobile'
import BetterScroll from 'components/betterScroll'
import { useRef } from 'react'
import axios from 'axios'


const topBarList = [
  { key: '213w', value: '选择区域' },
  { key: '213e', value: '时间排序' },
  { key: '213s', value: '装载量排序' },
]

const timeList = [
  {
    label: '时间升序',
    value: '时间升序',
    param: 'up'
  },
  {
    label: '时间降序',
    value: '时间降序',
    param: 'down'
  }
]

const loadList = [
  {
    label: '装载量升序',
    value: '装载量升序',
    param: 'up'
  },
  {
    label: '装载量降序',
    value: '装载量降序',
    param: 'down'
  }
]



const PingTuanList = (props) => {

  var params = useParams()
  const [groupList, setGroupList] = useState([])
  const [areaSwitch, setAreaSwitch] = useState(false)
  const [timeSwitch, setTimeSwitch] = useState(false)
  const [loadSwitch, setLoadSwitch] = useState(false)

  const [proList, setProList] = useState([])
  const [cityList, setCityList] = useState([])

  const [cityIndex, setCityIndex] = useState(0)
  const [proIndex, setProIndex] = useState(0)
  const [cityValue, setCityValue] = useState('')
  const [proValue, setProValue] = useState('')

  const [loadIndex, setLoadIndex] = useState(0)
  const [timeIndex, setTimeIndex] = useState(0)


  const PTList_Ref = useRef()
  const CITY_Ref = useRef()
  const PRO_Ref = useRef()

  console.log(proValue)

  useEffect(() => {
    console.log('请求数据')

    let config = {
    
      goodsid: params.gid,
    }

    axios.all([getGroupList(config), getGroupAdressList({ parentId: 1 })]).then(axios.spread((res, res1) => {
      if (res.status === 200) {


        setGroupList(filterExpiredGroup(res.data))


        try {
          PTList_Ref.current.BScroll.refresh()
        } catch (error) {

        }
      } else {
        Toast.info('网络错误', 1)
      }
      if (res1.status === 200) {
        setProList(res1.data)
        getGroupAdressList({ parentId: res1.data[0].id, action: 'addressCate' }).then(res2 => {
          setCityList(res2.data)
        })
      }
    }))

    return () => {
      // cleanup
    }
  }, [params])

  useEffect(() => {
    // effect

    console.log('group')

    return () => {

    }
  }, [groupList])

  function filterExpiredGroup(groupList) {
    let now = parseInt(new Date().getTime().toString().slice(0, -3))
    return groupList.filter((item) => {
      return parseInt(item.endtime) > now
    })
  }

  return (
    <>
      <DocumentTitle title={props.route.title} />

      <PingTuanListStyle>
        <div className="pingtuan-list-box">
          <div className="top-bar flex-row">
            {
              topBarList.map((item, key) => {
                return (
                  <div key={key + item.key} className="item" onClick={e => { handelClick(key) }}>
                    <p className="flex-row">

                      {item.value}

                    </p>
                  </div>
                )
              })
            }
          </div>

          <div className="container">
            <BetterScroll ref={PTList_Ref} style={{ height: 'calc( 100vh - 1.08rem )' }}>
              {/* 平团列表 */}
              <PingTuan groupList={groupList} />
            </BetterScroll>
          </div>

        </div>


        {
          loadSwitch &&
          <div className="pick">
            {
              loadList.map((item, key) => {
                return (
                  <div style={loadIndex === key ? { color: '#ff762e' } : {}} key={key + item.label} className="pickItem flex-column" onClick={e => { handelLoadSort(key, item.param) }}>
                    <p className="" > {item.value} </p>
                  </div>
                )
              })
            }
          </div>
        }
        {
          timeSwitch &&
          <div className="pick">
            {
              timeList.map((item, key) => {
                return (
                  <div style={timeIndex === key ? { color: '#ff762e' } : {}} key={key + item.label} className="pickItem flex-column" onClick={e => { handelTimeSort(key, item.param) }} >
                    <p className=""> {item.value} </p>
                  </div>
                )
              })
            }
          </div>
        }

        {
          areaSwitch &&
          <div className="pick-area flex-row">
            <div className="left-right">
              <div className="top">
                选择省份
              </div>
              <div className="content flex-column">
                <BetterScroll ref={PRO_Ref} style={{ height: '7.3rem' }} >

                  {
                    proList &&
                    proList.map((item, key) => {
                      return (
                        <div key={key + item.id} className="item" style={key === proIndex ? { color: '#ff762e' } : {}} onClick={e => { onPickArea('pro', item, key) }}>
                          { item.areaname}
                        </div>
                      )
                    })
                  }

                </BetterScroll>
              </div>
            </div>

            <div className="left-right">
              <div className="top">
                选择城市
              </div>
              <div className="content flex-column">
                <BetterScroll ref={CITY_Ref} style={{ height: '7.3rem' }} >
                  {
                    cityList &&
                    cityList.map((item, key) => {
                      return (
                        <div key={key + item.id} className="item" style={key === cityIndex ? { color: '#ff762e' } : {}} onClick={e => { onPickArea('city', item, key) }}>
                          { item.areaname}
                        </div>
                      )
                    })
                  }
                </BetterScroll>
              </div>
            </div>
          </div>
        }

      </PingTuanListStyle>


    </>
  )

  function handelTimeSort(key, value) {
    setTimeIndex(key)
    setTimeSwitch(!timeSwitch)
    sortGroupList('time', value)
  }

  function handelLoadSort(key, value) {
    setLoadIndex(key)
    setLoadSwitch(!loadSwitch)
    sortGroupList('load', value)
  }

  function sortGroupList(type, value) {


    let config = {
      goodsid: params.gid,
      city: cityValue
    }

    switch (type) {
      case 'city':
        config.city = value
        orderByGroup(config).then(res => {
          setGroupList(filterExpiredGroup(res.data))
        })

        break;
      case 'time':
        config.time = value
        orderByGroup(config).then(res => {
          setGroupList(filterExpiredGroup(res.data))

        })

        break;
      case 'load':
        config.loadage = value
        orderByGroup(config).then(res => {
          setGroupList(filterExpiredGroup(res.data))

        })

        break;

      default:
        break;
    }



  }

  function getCityList(id) {
    let config = {
      action: 'addressCate',
      parentId: id
    }

    getGroupAdressList(config).then(
      res => {
        setCityList(res.data)
        try {
          CITY_Ref.current.BScroll.refresh()
        } catch (error) {

        }
      }
    )
  }

  function onPickArea(type, item, key) {
    switch (type) {
      case 'city':
        setCityIndex(key)
        sortGroupList('city', item.areaname)
        setCityValue(item.areaname)
        setAreaSwitch(false)
        break;
      case 'pro':
        setProIndex(key)
        setCityIndex(0)
        setProValue(item.areaname)
        getCityList(item.id)
        break;
      default:
        break;
    }
    console.log(item)
  }

  function handelClick(index) {
    switch (index) {
      case 0:
        setAreaSwitch(!areaSwitch)
        setTimeSwitch(false)
        setLoadSwitch(false)

        break;
      case 1:
        setTimeSwitch(!timeSwitch)
        setLoadSwitch(false)
        setAreaSwitch(false)

        break;
      case 2:
        setLoadSwitch(!loadSwitch)
        setAreaSwitch(false)
        setTimeSwitch(false)

        break;

      default:
        break;
    }
  }
}

export default PingTuanList